<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0"/>
		<title>栅格系统布局</title>
		<style>
			.row{
				width: 100%;
				background-color: aquamarine;
			}
			/* 微元素：after的一个很重要的用法--清除浮动 */
			.row::after{
				clear: left;/*清除左浮动*/
				content: "";
				display: table;/*该元素会作为会计表格来显示（<table>）*/
			}
			/* CSS3新增[attribute^=value]选择器，用于匹配属性值以指定值开头的每个元素 */
			[class^="col"]{
				float: left;
				/* background-color: #e0e0e0; */
			}
			.col1{
				width: 25%;
				background-color: red;
			}
			.col2{
				width: 50%;
				background-color: yellow;
			}
			@media (max-width:768px) {
				.row{
					width: 100%;
				}
				[class^="col"]{
					float:none;
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div>标题</div>
		</div>
		<div class="row">
			<div class="col1">导航</div>
			<div class="col2">主要内容</div>
			<div class="col3">侧边栏</div>
		</div>
		<div class="row">
			<div>结尾</div>
		</div>
	</body>
</html>
